<template>
  <view class="w-full max-w-[750rpx] mx-auto min-h-screen bg-[#f6f8fa] p-[32rpx] box-border">
    <text class="block text-[48rpx] font-extrabold mb-[40rpx] text-center text-blue-600 drop-shadow">测试多选框功能</text>
    <FormView :fieldConfig="fieldConfig" :form="form" :showButtons="true" @submit="submitForm" />
  </view>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue'
import Taro from '@tarojs/taro'
import FormView from '@/components/FormView.vue'
import { localStg } from '@/utils'

const form = reactive<any>({})

const fieldConfig = {
  name: { show: true, label: '姓名', edit: true, type: 'text', required: true },
  idNumber: { show: true, label: '证件号码', edit: true, type: 'text' },
  recordid: { show: false, label: '健康档案id', edit: false, type: 'text' },
  
  // 测试多选框
  socialInsu: { 
    show: true, 
    label: '社会保险(可多选)', 
    edit: true, 
    type: 'checkbox', 
    options: [
      { value: '养老保险', text: '养老保险' },
      { value: '医疗保险', text: '医疗保险' },
      { value: '失业保险', text: '失业保险' },
      { value: '工伤保险', text: '工伤保险' },
      { value: '生育保险', text: '生育保险' }
    ]
  },
  
  // 测试单选框
  liveAlone: { 
    show: true, 
    label: '独居与否', 
    edit: true, 
    type: 'radio', 
    options: ['是', '否']
  },
  
  // 测试简单字符串选项的多选框
  socialWelfare: { 
    show: true, 
    label: '社会福利参与(可多选)', 
    edit: true, 
    type: 'checkbox', 
    options: ['低保', '特困供养', '残疾人补贴', '高龄补贴', '其他']
  },
  
  note: { show: true, label: '备注', edit: true, type: 'textarea' },
  id: { show: false, label: '主键ID', edit: false, type: 'text' }
}

onMounted(() => {
  const obj = localStg.get("demographicInfo");
  if(obj){
    form.name = obj.name;
    form.idNumber = obj.idNumber;
    form.recordid = obj.recordid;
  }
  
  // 初始化多选框的默认值
  form.socialInsu = ['医疗保险', '养老保险'];
  form.socialWelfare = ['低保'];
  form.liveAlone = '否';
})

function submitForm(formData: any, fieldConfig: any) {
  // 提交的表单数据
  // 多选框值:
    socialInsu: formData.socialInsu,
    socialWelfare: formData.socialWelfare,
    liveAlone: formData.liveAlone
  });
  
  Taro.showToast({ 
    title: '提交成功', 
    icon: 'success' 
  });
  
  setTimeout(() => {
    Taro.navigateBack();
  }, 1500);
}
</script>
